<template>
  <div class="container">
    <div class="page-title">审核事项</div>
    <div class="info-wrap">
      <el-tabs v-model="activeName">
        <el-tab-pane v-loading="loading" label="待审核" name="pending">
          <div
            v-for="(item, index) in pending"
            :key="item.reportId"
            class="box-wrap"
          >
            <el-divider v-if="index != 0"></el-divider>
            <el-avatar
              v-if="item.imgUrl"
              :size="55"
              :src="item.imgUrl"
            ></el-avatar>
            <el-avatar v-else :size="60">
              <i
                class="el-icon-user-solid"
                style="font-size: 30px; line-height: 55px"
              ></i>
            </el-avatar>
            <div v-if="item.category==1" class="detail-wrap">
              <span @click="toUser(item.createdBy)">{{ item.createUser }}</span>
              对
              <span @click="toScholar(item.reportScholar_id)">{{
                item.reportScholar_name
              }}</span>
              学者提出申诉。
            </div>
            <div v-else-if="item.category==2" class="detail-wrap">
              <span @click="toUser(item.createdBy)">{{ item.createUser }}</span>
              对
              <span @click="toScholar(item.reportScholar_id)">{{
                item.reportScholar_name
              }}</span>
              学者的
              <span @click="toPaper(item.reportArticle_id)">{{
                item.paperTitle
              }}</span>
              提出申诉。
            </div>
            <div class="action" :style="{ top: index == 0 ? '35%' : '50%' }">
              <i class="el-icon-check accept" @click="accept(item.id)">
                <span>通过</span>
              </i>
              <i class="el-icon-close reject" @click="reject(item.id)">
                <span>驳回</span>
              </i>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="done">
          <div v-for="(item, index) in done" :key="item.id" class="box-wrap">
            <el-divider v-if="index != 0"></el-divider>
            <el-avatar
              v-if="item.imgUrl"
              :size="55"
              :src="item.imgUrl"
            ></el-avatar>
            <el-avatar v-else :size="60">
              <i
                class="el-icon-user-solid"
                style="font-size: 30px; line-height: 55px"
              ></i>
            </el-avatar>
            <div class="detail-wrap">
              <span @click="toUser(item.userId)">{{ item.createUser }}</span> 对
              <span @click="toScholar(item.scholarId)">{{
                item.reportScholarName
              }}</span>
              学者提出申诉。
            </div>
            <div class="action" :style="{ top: index == 0 ? '35%' : '50%' }">
              <i class="el-icon-check accept" @click="accept(item.scholarId)">
                <span>接受</span>
              </i>
              <i class="el-icon-close reject" @click="reject(item.id)">
                <span>驳回</span>
              </i>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
  <script>
export default {
  name: "UserInfo",
  data() {
    return {
      isLogin: false,
      activeName: "pending",
      loading: true,
      pending: [],
      done: [],
      listAll: [
        {
          userId: "a5462f789612cbe48332",
          username: "搞什么啊",
          imgUrl:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTRxjqjCDoBcjS9j91OCbndLhuMErAvDI-Ng&usqp=CAU",
          reportScholarId: "86ac7354ea1ba6863a",
          reportScholarName: "周杰伦",
        },
        {
          userId: "a5462f789612cbe48332",
          username: "搞什么啊",
          imgUrl:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTRxjqjCDoBcjS9j91OCbndLhuMErAvDI-Ng&usqp=CAU",
          reportScholarId: "86ac7354ea1ba6863a",
          reportScholarName: "周杰伦",
        },
        {
          userId: "a5462f789612cbe48332",
          username: "搞什么啊",
          imgUrl:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTRxjqjCDoBcjS9j91OCbndLhuMErAvDI-Ng&usqp=CAU",
          reportScholarId: "86ac7354ea1ba6863a",
          reportScholarName: "周杰伦",
        },
        {
          userId: "a5462f789612cbe48332",
          username: "搞什么啊",
          imgUrl:
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTRxjqjCDoBcjS9j91OCbndLhuMErAvDI-Ng&usqp=CAU",
          reportScholarId: "86ac7354ea1ba6863a",
          reportScholarName: "周杰伦",
        },
      ],
    };
  },
  created() {
    this.getAll();
  },
  methods: {
    toPaper(id) {
      console.log(id);
      // 跳转学术成果
      this.$router.push({ path: `/paperInfo/${id}` });
    },
    toScholar(id) {
      console.log(id);
      // 跳转学者主页
      this.$router.push("/scholarprofile/" + id);
    },
    toUser(id) {
      console.log(id);
      // 跳转用户主页
      this.$router.push("/userprofile/"+id)
    },
    getAll() {
      this.getPending();
    },
    async accept(id) {
      await this.$axios({
        method: "post",
        url: "/api/report/accept/" + id,
      }).then((res) => {
        console.log(res.data);
      });
    },
    async reject(id) {
      await this.$axios({
        method: "post",
        url: "/api/report/reject/" + id,
      }).then((res) => {
        console.log(res.data);
      });
    },
    async getPending() {
      await this.getScholarReport();
      // await this.getReviewReport();
      this.loading = false;
    },
    // async getReviewReport(){
    //   await this.$axios({
    //     method: "get",
    //     url: "/api/getReviewReport?type=0",
    //   }).then((res) => {
    //     console.log(res.data);
    //     if(res.data.data.length>0){
    //       let r= res.data.data
    //     this.pending.append = r;
    //     }
    //   });
    // },
    async getScholarReport(){
      await this.$axios({
        method: "get",
        url: "/api/report/all?status=0",
      }).then((res) => {
        console.log(res.data);
        this.pending = res.data.reports;
      });
      if(this.pending.length==0)return
      for (let i = 0; i < this.pending.length; i++) {
        this.pending[i].imgUrl='http://120.46.205.87'+this.pending[i].imgUrl;
        if (this.pending[i].reportScholar_id != null) {
          await this.$axios({
            method: "get",
            url:
              "/api/getScholarPage?scholarId=" +
              this.pending[i].reportScholar_id,
          }).then((res) => {
            console.log(res.data.post.data[0]);
            this.pending[i].reportScholar_name = res.data.post.data[0].name;
            // console.log(this.pending);
            // this.pending = res.data.reports;
          });
        }
        if (this.pending[i].createdBy != null) {
          await this.$axios({
            method: "get",
            url: "/api/getUserPage?userId=" + this.pending[i].createdBy,
          }).then((res) => {
            console.log(res.data);
            this.pending[i].createUser = res.data.data.username;
            console.log(this.pending);
            // this.pending = res.data.reports;
          });
        }
        if (this.pending[i].reportArticle_id != null) {
          await this.$axios({
            method: "get",
            url:
              "/api/getPaperPage?paperId=" + this.pending[i].reportArticle_id,
          }).then((res) => {
            console.log("paper")
            console.log(res.data.post.data[0]);
            this.pending[i].paperTitle = res.data.post.data[0].title;
            console.log(this.pending);
            // this.pending = res.data.reports;
          });
        }
      }
    },
    async getDone() {
      await this.$axios({
        method: "get",
        url: "/api/report/all?status=1",
      }).then((res) => {
        console.log(res.data);
        this.done = res.data.reports;
      });
      for (let i = 0; i < this.done.length; i++) {
        this.done[i].imgUrl='http://120.46.205.87'+this.done[i].imgUrl;
        if (this.done[i].reportScholar_id != "") {
          await this.$axios({
            method: "get",
            url:
              "/api/getScholarPage?scholarId=" +
              this.done[i].reportScholar_id,
          }).then((res) => {
            console.log(res.data.post.data[0]);
            this.done[i].reportScholar_name = res.data.post.data[0].name;
            // console.log(this.pending);
            // this.pending = res.data.reports;
          });
        }
        if (this.done[i].createdBy != "") {
          await this.$axios({
            method: "get",
            url: "/api/getUserPage?userId=" + this.done[i].createdBy,
          }).then((res) => {
            console.log(res.data);
            this.done[i].createUser = res.data.data.username;
            console.log(this.done);
            // this.pending = res.data.reports;
          });
        }
        this.loading = false;
      }
    },
    // getDone() {
    //   return this.$axios({
    //     method: "get",
    //     url: "/api/report/all?status=1",
    //   });
    // },
    // async getList() {
    //   await this.$axios({
    //     method: "get",
    //     url: "/api/report/all",
    //   }).then((res) => {
    //     console.log(res.data);
    //     this.listAll = res.data.reports;
    //   });
    // },
  },
  watch: {
    $route(to, from) {
      console.log(from.path + " to " + to.path);
      if (to.path === "/usercenter/messagecenter/privatemessage") {
        this.isPM = true;
      } else {
        this.isPM = false;
      }
    },
  },
};
</script>
<style scoped>
.accept {
  color: rgb(17, 137, 11);
  cursor: pointer;
}
.accept:hover {
  background-color: rgb(236, 255, 237);
}
.reject {
  color: red;
  cursor: pointer;
}
.reject:hover {
  background-color: rgb(255, 236, 236);
}
.disablePm {
  color: #bbbbbb;
}
.pm:hover {
  background-color: #eeeeee;
}
.pm {
  display: inline-block;
  cursor: pointer;
}
.action span {
  font-size: 16px;
}
.action i {
  height: 100%;
  padding: 35px 25px;
  box-sizing: border-box;
  vertical-align: middle;
}
.action {
  float: right;
  position: relative;
  height: 83px;
  /* outline: 1px red solid; */
}
.detail-wrap span {
  color: #3d3daf;
  font-weight: 600;
  cursor: pointer;
}
.detail-wrap {
  padding: 30px 0;
  display: inline-block;
  vertical-align: middle;
  letter-spacing: 1px;
}
.el-avatar {
  margin: 0 20px 0 0;
  vertical-align: middle;
}
.el-divider {
  margin: 1px auto;
  position: relative;
  top: 1px;
  /* outline: 1px red solid; */
}
.info-wrap {
  padding: 40px;
  box-shadow: #dedede 0px 0px 20px;
}
.page-title {
  margin: 0 0 40px 0;
  font-size: 22px;
  font-weight: 600;
  color: #3d3daf;
}
.container {
  letter-spacing: 1px;
  width: 1000px;
}
::v-deep .el-tabs__item {
  color: #777777;
  font-weight: 600;
  font-size: 18px;
  height: 45px;
  width: 80px;
  text-align: center;
}
::v-deep .el-tabs__item.is-active {
  color: #778dff;
}
::v-deep .el-tabs__item:hover {
  color: #778dff;
  cursor: pointer;
}
::v-deep .el-tabs__active-bar {
  background-color: #778dff;
  width: 80px;
  height: 3px;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 3px;
}
</style>